<template>
	<!-- 修改密码 -->
	<view>
		<TopNavCustom title="修改密码"></TopNavCustom>
		<form @submit="formSubmit" @reset="formReset" class="change-pwd">
			<view class="form-item">
				<image src="/static/login_form_icons/pwd.png" class="icon"></image>
				<input class="form-input" name="password" :type="passwordType0" placeholder="请输入密码" />
				<image v-show="showPwd0" src="/static/hidden-eye.png" @click.stop="showKey(0)" class="eye"></image>
				<image v-show="!showPwd0" src="/static/show-eye.png" @click.stop="showKey(0)" class="eye"></image>
			</view>
			<view class="form-item">
				<image src="/static/login_form_icons/pwd.png" class="icon"></image>
				<input class="form-input" name="newPassword" :type="passwordType1" placeholder="请输入新密码" />
				<image v-show="showPwd1" src="/static/hidden-eye.png" @click.stop="showKey(1)" class="eye"></image>
				<image v-show="!showPwd1" src="/static/show-eye.png" @click.stop="showKey(1)" class="eye"></image>
			</view>
			<view class="form-item">
				<image src="/static/login_form_icons/pwd.png" class="icon"></image>
				<input class="form-input" name="rePassword" :type="passwordType2" placeholder="请输入确认密码" />
				<image v-show="showPwd2" src="/static/hidden-eye.png" @click="showKey(2)" class="eye"></image>
				<image v-show="!showPwd2" src="/static/show-eye.png" @click="showKey(2)" class="eye"></image>
			</view>
			<button type="default" class="btn" form-type="submit">确定</button>
		</form>
	</view>
</template>

<script>
	import graceChecker from "@/common/graceChecker.js";
	export default {
		data() {
			return {
				showPwd0: true,
				showPwd1: true,
				showPwd2: true,
				passwordType0: "password",
				passwordType1: "password",
				passwordType2: "password",
			};
		},
		methods: {
			showKey(index) {
				switch (index) {
					case 0:
						this.showPwd0 = !this.showPwd0
						this.passwordType0 = this.showPwd0 ? 'password' : 'text'
						break;
					case 1:
						this.showPwd1 = !this.showPwd1
						this.passwordType1 = this.showPwd1 ? 'password' : 'text'
						break;
					case 2:
						this.showPwd2 = !this.showPwd2
						this.passwordType2 = this.showPwd2 ? 'password' : 'text'
						break;
				}

			},
			formReset: function(e) {
				console.log("清空数据");
			},
			formSubmit: function(e) {
				let formData = e.detail.value;
				console.log(formData);
				const loginRule = [{
						name: "password",
						checkType: "string",
						checkRule: "1,100",
						errorMsg: "密码不能为空",
					},
					{
						name: "newPassword",
						checkRule: "1,100",
						errorMsg: "新密码不能为空",
					},
					{
						name: "rePassword",
						checkType: "string",
						checkRule: "1,100",
						errorMsg: "重复密码不能为空",
					},
				];
				let checkRes = graceChecker.check(formData, loginRule);
				if (checkRes) {
					if (formData.password != uni.getStorageSync("password")) {
						uni.$showMsg("原密码输入错误");
						return;
					}
					if (formData.newPassword != formData.rePassword) {
						uni.$showMsg("两次密码不相同！");
						return;
					}
					if (formData.newPassword == '') {
						uni.$showMsg("新密码不能为空！");
						return;
					}
					if (formData.rePassword == '') {
						uni.$showMsg("确认密码不能为空！");
						return;
					}
					let newUser = {};
					newUser.phone = uni.getStorageSync("phone");
					newUser.headerUrl = uni.getStorageSync("headerUrl");
					newUser.userName = uni.getStorageSync("userName");
					newUser.userId = uni.getStorageSync("userId");
					newUser.roleId = uni.getStorageSync("roleId");
					newUser.wxId = uni.getStorageSync("wxId");
					newUser.password = formData.newPassword;
					this.updateInfo(newUser);
				} else {
					uni.$showMsg(graceChecker.error);
				}
				//connet api
			},
			async updateInfo(newUser) {
				const data = await uni.$H.post("/user/updateUserInfo", newUser, {
					authCode: true,
				});
				if (data.status === 0) {
					uni.setStorageSync("password", newUser.newPassword);
					uni.$showMsg("修改成功");
					uni.navigateTo({
						url: "/pages/login/login",
					});
				} else {
					uni.$showMsg(data.message);
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.change-pwd {
		display: flex;
		flex-direction: column;
		padding: 65rpx 95rpx 0 95rpx;

		.base-input {
			margin-bottom: 40rpx;

			.input {
				background: #ffffff;
				box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 44rpx;
				font-size: 28rpx;
			}
		}

		.btn {
			margin-top: 80rpx;
			width: 560rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #e62129 0%, #ba000a 100%);
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
			color: #ffffff;
		}
	}

	.form-item {
		// display: inline-flexbox;
		flex-direction: column;
		position: relative;

		.icon {
			position: absolute;
			height: 30rpx;
			width: 22rpx;
			margin-top: 28rpx;
			margin-left: 30rpx;
		}

		.eye {
			position: absolute;
			width: 40rpx;
			height: 30rpx;
			top: 30rpx;
			right: 30rpx;
		}

		margin-top: 44rpx;
		// padding-left: 50rpx;
		// padding-right: 50rpx;

		.form-input {
			padding-left: 60rpx;
			margin-bottom: 40rpx;
			width: 500rpx;
			border: 1rpx solid transparent;
			line-height: 88rpx;
			height: 88rpx;
			background: #f4f4f4;
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
		}

		.form-btn {
			color: #ffffff;
			height: 88rpx;
			width: 100%;
			margin-top: 105rpx;
			color: #e62029;
			border: 1rpx solid #e62029;
			border-radius: 44rpx;
		}
	}
</style>
